import { lazy, Suspense } from "react"

import Layout from "@/pages/Layout"

const Home = lazy(() => import("@/pages/Home"))
const Article = lazy(() => import("@/pages/Article"))
const Publish = lazy(() => import("@/pages/Publish"))
const Login = lazy(() => import("@/pages/Login"))
const Overview = lazy(() => import("@/pages/Overview"))

const lazyload = children => {
  return <Suspense fallback={<h1>loading...</h1>}>{children}</Suspense>
}

const routes = [
  {
    path: "/login",
    element: lazyload(<Login />)
  },
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: lazyload(<Home />)
      },
      {
        path: "article",
        element: lazyload(<Article />)
      },
      {
        path: "publish",
        element: lazyload(<Publish />)
      },
      {
        path: "overview",
        element: lazyload(<Overview />)
      }
    ]
  }
]

export default routes
